<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>商品录入</title>
	<!-- 引入vue以及element-ui样式 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	
	
	<style>
	  .el-table .warning-row {
	    background: oldlace;
	  }
	
	  .el-table .success-row {
	    background: #f0f9eb;
	  }
	  .app{
		  font-family: '微软雅黑';
	  }
	  </style>
</head>
<body>
	<div class="app">
		<el-row>
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item><font style="font-size: 20px;">品牌商</font></el-breadcrumb-item>
			  <el-breadcrumb-item><font style="font-size: 20px;">商品录入</font></el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-divider></el-divider>
		<el-row justify="center" >
			<el-col :span="2" :offset="2" style="text-align: right;">
				<font style="font-size: 15px;vertical-align: middle;">商品标题:</font>
			</el-col>
			<el-col :span="3">
				<el-input v-model="keyword" placeholder="搜索" size="small">
			</el-col>
			<el-col :span="4">
				</el-input><el-button icon="el-icon-search" size="small" type="primary" @click="Search()">搜索</el-button>
			</el-col>
			<el-col :span="4" :offset="3">
				<el-button type="primary" plain @click="dialog=true">录入</el-button>
				<el-button type="danger" plain>删除</el-button>
			</el-col>
		</el-row>
		<br>
		<el-row justify="center">
			<el-col :span="20" :offset="3">
				<el-row>
					  <el-table
						v-loading="loading"
						element-loading-text="数据加载中"
						element-loading-spinner="el-icon-loading"
						element-loading-spinner-color="white"
					    :data="ShopData"
						border
						style="width: 70%;">
						<el-table-column
						type="selection"
						width="55">
						</el-table-column>
						<el-table-column
						label="商品标题"
						width="180"
						>
						<template slot-scope="scope">
						  {{scope.row.name}}
						</template>
						</el-table-column>
					    <el-table-column
					      label="商品价格"
					      width="180">
					      <template slot-scope="scope">
					        <span style="margin-left: 10px">{{ scope.row.price }}元</span>
					      </template>
					    </el-table-column>
					    <el-table-column
					      label="商品库存"
					      width="180">
					      <template slot-scope="scope">
					        <el-popover trigger="hover" placement="top">
					          <p>姓名: {{ scope.row.name }}</p>
					          <div slot="reference" class="name-wrapper">
					            <el-tag size="medium">{{ scope.row.stock }}</el-tag>
					          </div>
					        </el-popover>
					      </template>
					    </el-table-column>
					    <el-table-column label="操作" width="auto">
					      <template slot-scope="scope">
					        <el-button
					          size="mini"
					          @click="UpdateData(scope.row)">编辑</el-button>
					        <el-button
					          size="mini"
					          type="danger"
					          @click="DeleteData(scope.row.id)">删除</el-button>
					      </template>
					    </el-table-column>
					  </el-table>
				</el-row>
			</el-col>
		</el-row>
		<br />
		<el-row justify="center">
			<el-col :span="10" :offset="7">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page="CurrentPage"
					:page-size="PageSize"
					layout="total, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</el-col>
		</el-row>
		<!-- 录入对话框 -->
		<el-dialog title="商品录入" :visible.sync="dialog" >
		  <el-form :model="form" :rules="rules" ref="form">
			<font style="color:red">描述商品的信息</font>
		    <el-form-item label="商品标题" :label-width="formLabelWidth" prop="name">
		      <el-input v-model="form.name" autocomplete="off"></el-input>
		    </el-form-item>
			<font style="color:red">描述商品的体积信息</font>
			<el-form-item label="体积重" :label-width="formLabelWidth" prop="weight">
			  <el-input v-model.number="form.weight" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的型号信息</font>
		    <el-form-item label="商品型号" :label-width="formLabelWidth" prop="model">
		      <el-input v-model="form.model" autocomplete="off"></el-input>				
		    </el-form-item>
			<font style="color:red">描述商品的价格信息</font>
			<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
			  <el-input v-model.number="form.price" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品能够保修多久的信息</font>
			<el-form-item label="保修期" :label-width="formLabelWidth" prop="dlperiod">
			  <el-input v-model.number="form.dlperiod" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的库存信息</font>
			<el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
			  <el-input v-model.number="form.stock" autocomplete="off"></el-input>				
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 修改对话框 -->
		<!-- 对话框 -->
		<el-dialog title="商品修改" :visible.sync="dialog2" >
		  <el-form :model="uform" :rules="rules" ref="uform">
			<font style="color:red">描述商品的信息</font>
		    <el-form-item label="商品标题" :label-width="formLabelWidth" prop="name">
		      <el-input v-model="uform.name" autocomplete="off"></el-input>
		    </el-form-item>
			<font style="color:red">描述商品的体积信息</font>
			<el-form-item label="体积重" :label-width="formLabelWidth" prop="weight">
			  <el-input v-model.number="uform.weight" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的型号信息</font>
		    <el-form-item label="商品型号" :label-width="formLabelWidth" prop="model">
		      <el-input v-model="uform.model" autocomplete="off"></el-input>				
		    </el-form-item>
			<font style="color:red">描述商品的价格信息</font>
			<el-form-item label="价格" :label-width="formLabelWidth" prop="price">
			  <el-input v-model.number="uform.price" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品能够保修多久的信息</font>
			<el-form-item label="保修期" :label-width="formLabelWidth" prop="dlperiod">
			  <el-input v-model.number="uform.dlperiod" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的库存信息</font>
			<el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
			  <el-input v-model.number="uform.stock" autocomplete="off"></el-input>				
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialog2 = false">取 消</el-button>
		    <el-button type="primary" @click="submitForm2('uform')">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</body>
<script>
	new Vue({
		el: '.app',
		data:function(){
			return{
				loading:true,
				dialog:false,
				dialog2:false,
				keyword:'',
				CurrentPage:1,
				PageSize:5,
				total:0,
				ShopData:[],
				form: {
				    name: '',
				    model: '',
				    price: '',
					dlperiod: '',
				    weight: '',
				    stock:'',
				},
				uform:{
					id:'',
				    name: '',
				    model: '',
				    price: '',
					dlperiod: '',
				    weight: '',
				    stock:'',					
				},
				rules:{
					name:[{ type:'string',required: true, message: '请输入商品标题', trigger: 'blur' }],
					model:[{ type:'string',required: true, message: '请输入商品型号信息', trigger: 'blur' }],
					price:[{type:'number',message:'请输入数字',trigger:'change'},
					{required: true, message: '请输入商品价格', trigger: 'blur' }],
					dlperiod:[{type:'number',message:'请输入数字',trigger:'change'},
					{required: true, message: '请输入商品保修期', trigger: 'blur' }],
					weight:[{type:'number',message:'请输入数字',trigger:'change'},
					{ required: true, message: '请输入商品体积重', trigger: 'blur' }],
					stock:[{type:'number',message:'请输入数字',trigger:'change'},
					{required: true, message: '请输入商品库存信息', trigger: 'blur' }]
				},
				formLabelWidth: '120px'
			}
		},
		methods:{
		  handleEdit(index, row) {
			console.log(index, row);
		  },
		  handleDelete(index, row) {
			console.log(index, row);
		  },
		  handleCurrentChange(val){
			  this.CurrentPage = val;
			  this.loadData(this.CurrentPage);
		  },
		  //搜索功能
		  Search(){
			this.loadData(1);
		  },
		  //删除数据
		  DeleteData(val){
			var url = "/BMC/delete/"+val;
		  	axios({
		  	method: 'get',//提交方法
		  	url: url
		  	}).then((res) => {
				this.loadData(this.CurrentPage);
		  	})
		  },
		  ClearData(){
			//重置数据
			  
		  },
		  UpdateData(val){
			this.uform.id = val.id;
			this.uform.name = val.name;
			this.uform.model = val.model;
			this.uform.price = val.price;
			this.uform.weight = val.weight;
			this.uform.stock = val.stock;
			this.uform.dlperiod = val.dlperiod;
			this.dialog2 = true;
		  },
		  submitForm(formName) {
		    this.$refs[formName].validate((valid) => {
		        if (valid) 
				{
					axios({
					method: 'post',//提交方法
					url: "/BMC/add",
					params: {
						'name':this.form.name,
						'model':this.form.model,
						'price':this.form.price,
						'weight':this.form.weight,
						'stock':this.form.stock,
						'dlperiod':this.form.dlperiod
					}
					}).then((res) => {
						console.log(res);
						if(res.data.data == 1)
						{		
							this.$message({
								message: '成功录入',
								type: 'success'
							});
							this.loadData(this.CurrentPage);
							this.dialog = false;
							this.$refs[formName].resetFields();
						}else{
							this.$message({
								message: '录入失败',
								type: 'error'
							});
						}
					});
		        } else {
		            return false;
		        }
		    });
			},
			submitForm2(formName){
		    this.$refs[formName].validate((valid) => {
		        if (valid) 
				{
					axios({
					method: 'post',//提交方法
					url: "/BMC/update",
					params: {
						'id':this.uform.id,
						'name':this.uform.name,
						'model':this.uform.model,
						'price':this.uform.price,
						'weight':this.uform.weight,
						'stock':this.uform.stock,
						'dlperiod':this.uform.dlperiod
					}
					}).then((res) => {
						console.log(res);
						if(res.data.data == 1)
						{		
							this.$message({
								message: '成功修改',
								type: 'success'
							});
							this.loadData(this.CurrentPage);
							this.dialog2 = false;
							this.$refs[formName].resetFields();
						}else{
						this.$message({
							message: '修改失败',
							type: 'error'
						});
						this.dialog2 = false;	
						}
					});
		        } else {
		            return false;
		        }
		    });				
			},
		  //加载页面录入数据
		  loadData(CurrentPage){
			  this.loading = true;
			  var url = '';
		      if(this.keyword.length==0){
		        this.keyword+='';
				url = "/BMC/queryPage/"+this.CurrentPage+"/"+this.PageSize+"/''";
              }else{
				url = "/BMC/queryPage/"+this.CurrentPage+"/"+this.PageSize+"/"+this.keyword;
			  }
			 axios({
			 method: 'get',//提交方法
			 url: url
			 }).then((res) => {
				this.total = res.data.data.total;
				this.ShopData = res.data.data.data;
				this.loading = false;
			 })
			 }
		  }	  
		,
		created() {
			this.loadData(1);
		}
	})
</script>
</html>
